<template>
  <div class="attractions-page">
    <!-- Banner 区域 -->
    <PageBanner
      title="发现精彩景点"
      subtitle="全球热门景点门票，在线预订更优惠"
      icon="🎫"
      background-image="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1920&q=80"
      height="450px"
    >
      <template #extra>
        <!-- 快速搜索 -->
        <div class="quick-search">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索景点名称、城市..."
            size="large"
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" size="large" class="search-btn" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
        </div>
      </template>
    </PageBanner>

    <!-- 筛选区域 -->
    <section class="filter-section">
      <div class="container">
        <div class="filter-container">
          <!-- 目的地筛选 -->
          <div class="filter-group">
            <div class="filter-label">
              <el-icon><Location /></el-icon>
              目的地
            </div>
            <div class="filter-options">
              <div
                v-for="city in cities"
                :key="city.id"
                class="filter-option"
                :class="{ active: selectedCity === city.id }"
                @click="selectedCity = city.id; handleFilterChange()"
              >
                {{ city.name }}
              </div>
            </div>
          </div>

          <!-- 类型筛选 -->
          <div class="filter-group">
            <div class="filter-label">
              <el-icon><Grid /></el-icon>
              景点类型
            </div>
            <div class="filter-options">
              <div
                v-for="type in types"
                :key="type.id"
                class="filter-option"
                :class="{ active: selectedType === type.id }"
                @click="selectedType = type.id; handleFilterChange()"
              >
                <span class="option-icon">{{ type.icon }}</span>
                {{ type.name }}
              </div>
            </div>
          </div>

          <!-- 价格筛选 -->
          <div class="filter-group">
            <div class="filter-label">
              <el-icon><Wallet /></el-icon>
              价格区间
            </div>
            <div class="filter-options">
              <div
                v-for="price in priceRanges"
                :key="price.id"
                class="filter-option"
                :class="{ active: selectedPrice === price.id }"
                @click="selectedPrice = price.id; handleFilterChange()"
              >
                {{ price.label }}
              </div>
            </div>
          </div>

          <!-- 排序方式 -->
          <div class="filter-group">
            <div class="filter-label">
              <el-icon><Sort /></el-icon>
              排序
            </div>
            <div class="filter-options">
              <div
                v-for="sort in sortOptions"
                :key="sort.id"
                class="filter-option"
                :class="{ active: selectedSort === sort.id }"
                @click="selectedSort = sort.id; handleFilterChange()"
              >
                {{ sort.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 景点列表 -->
    <section class="attractions-section">
      <div class="container">
        <div class="section-info">
          <h2 class="section-title">为您找到 {{ filteredAttractions.length }} 个景点</h2>
          <el-button text @click="resetFilters">
            <el-icon><RefreshRight /></el-icon>
            重置筛选
          </el-button>
        </div>

        <div v-loading="loading" class="attractions-grid">
          <div
            v-for="attraction in filteredAttractions"
            :key="attraction.id"
            class="attraction-card"
            @click="goToDetail(attraction.id)"
          >
            <div class="card-image">
              <img :src="attraction.image" :alt="attraction.name" />
<!--              <div class="card-badges">
                <span v-if="attraction.hot" class="badge hot">🔥 热门</span>
                <span v-if="attraction.discount" class="badge discount">{{ attraction.discount }}折</span>
              </div>-->
            </div>
            <div class="card-content">
              <div class="card-header">
                <h3 class="card-title">{{ attraction.name }}</h3>
                <div class="card-rating">
                  <el-icon class="star"><Star /></el-icon>
                  <span>{{ attraction.rating }}</span>
                </div>
              </div>
              <div class="card-location">
                <el-icon><Location /></el-icon>
                {{ attraction.city }}
              </div>
              <p class="card-desc">{{ attraction.description }}</p>
              <div class="card-tags">
                <span v-for="tag in attraction.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
              <div class="card-footer">
                <div class="price-info">
                  <span class="price-label">门票</span>
                  <div class="price-box">
                    <span v-if="attraction.originalPrice" class="original-price">¥{{ attraction.originalPrice }}</span>
                    <span class="current-price">¥{{ attraction.price }}</span>
                  </div>
                </div>
                <el-button type="primary" class="book-btn" @click.stop="handleBook(attraction)">立即预订</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Location, Grid, Wallet, Sort, Star, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import PageBanner from '@/components/common/PageBanner.vue'
// import { getCities, getTypes, getAttractionsList } from '@/api/attractions'

const router = useRouter()
const searchKeyword = ref('')
const selectedCity = ref('all')
const selectedType = ref('all')
const selectedPrice = ref('all')
const selectedSort = ref('hot')
const loading = ref(false)

// 城市列表
const cities = ref([
  { id: 'all', name: '全部城市' },
  { id: 'beijing', name: '北京' },
  { id: 'shanghai', name: '上海' },
  { id: 'hangzhou', name: '杭州' },
  { id: 'chengdu', name: '成都' },
  { id: 'xian', name: '西安' },
  { id: 'sanya', name: '三亚' }
])

// 景点类型
const types = ref([
  { id: 'all', name: '全部类型', icon: '🌟' },
  { id: 'nature', name: '自然风光', icon: '🏔️' },
  { id: 'culture', name: '人文古迹', icon: '🏛️' },
  { id: 'theme', name: '主题乐园', icon: '🎡' },
  { id: 'museum', name: '博物馆', icon: '🏛️' },
  { id: 'park', name: '公园', icon: '🌳' }
])

// 价格区间
const priceRanges = ref([
  { id: 'all', label: '不限' },
  { id: 'free', label: '免费' },
  { id: 'low', label: '¥50以下' },
  { id: 'mid', label: '¥50-150' },
  { id: 'high', label: '¥150以上' }
])

// 排序选项
const sortOptions = ref([
  { id: 'hot', label: '热门优先' },
  { id: 'price-asc', label: '价格从低到高' },
  { id: 'price-desc', label: '价格从高到低' },
  { id: 'rating', label: '评分最高' }
])

// 景点数据
const attractions = ref([
  {
    id: 1,
    name: '故宫博物院',
    city: '北京',
    cityId: 'beijing',
    type: 'culture',
    image: 'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=600&q=80',
    description: '世界文化遗产，中国明清两代的皇家宫殿',
    rating: 4.8,
    price: 60,
    originalPrice: null,
    hot: true,
    discount: null,
    tags: ['世界遗产', '历史建筑', '必游景点']
  },
  {
    id: 2,
    name: '上海迪士尼乐园',
    city: '上海',
    cityId: 'shanghai',
    type: 'theme',
    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&q=80',
    description: '梦幻童话世界，适合全家游玩',
    rating: 4.7,
    price: 399,
    originalPrice: 499,
    hot: true,
    discount: 8,
    tags: ['亲子游', '主题乐园', '娱乐']
  },
  {
    id: 3,
    name: '西湖风景区',
    city: '杭州',
    cityId: 'hangzhou',
    type: 'nature',
    image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=600&q=80',
    description: '江南名湖，风景如画',
    rating: 4.9,
    price: 0,
    originalPrice: null,
    hot: true,
    discount: null,
    tags: ['免费', '自然风光', '世界遗产']
  },
  {
    id: 4,
    name: '大熊猫繁育研究基地',
    city: '成都',
    cityId: 'chengdu',
    type: 'nature',
    image: 'https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?w=600&q=80',
    description: '近距离观赏国宝大熊猫',
    rating: 4.8,
    price: 58,
    originalPrice: null,
    hot: true,
    discount: null,
    tags: ['动物', '亲子游', '科普']
  },
  {
    id: 5,
    name: '兵马俑博物馆',
    city: '西安',
    cityId: 'xian',
    type: 'museum',
    image: 'https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=600&q=80',
    description: '世界第八大奇迹，秦始皇陵兵马俑',
    rating: 4.9,
    price: 120,
    originalPrice: 150,
    hot: true,
    discount: 8,
    tags: ['世界遗产', '历史', '必游']
  },
  {
    id: 6,
    name: '亚龙湾热带天堂森林公园',
    city: '三亚',
    cityId: 'sanya',
    type: 'nature',
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80',
    description: '热带雨林，俯瞰亚龙湾全景',
    rating: 4.6,
    price: 175,
    originalPrice: 198,
    hot: false,
    discount: 9,
    tags: ['自然风光', '森林', '海景']
  },
  {
    id: 7,
    name: '颐和园',
    city: '北京',
    cityId: 'beijing',
    type: 'culture',
    image: 'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=600&q=80',
    description: '中国现存最大的皇家园林',
    rating: 4.7,
    price: 30,
    originalPrice: null,
    hot: false,
    discount: null,
    tags: ['皇家园林', '世界遗产', '历史']
  },
  {
    id: 8,
    name: '东方明珠',
    city: '上海',
    cityId: 'shanghai',
    type: 'culture',
    image: 'https://images.unsplash.com/photo-1548919973-5cef591cdbc9?w=600&q=80',
    description: '上海地标建筑，360度观景台',
    rating: 4.5,
    price: 180,
    originalPrice: 220,
    hot: false,
    discount: 8,
    tags: ['地标', '观景', '夜景']
  },
  {
    id: 9,
    name: '灵隐寺',
    city: '杭州',
    cityId: 'hangzhou',
    type: 'culture',
    image: 'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=600&q=80',
    description: '江南名刹，千年古寺',
    rating: 4.6,
    price: 45,
    originalPrice: null,
    hot: false,
    discount: null,
    tags: ['寺庙', '历史', '祈福']
  }
])

// 筛选后的景点
const filteredAttractions = computed(() => {
  let result = attractions.value

  // 城市筛选
  if (selectedCity.value !== 'all') {
    result = result.filter(a => a.cityId === selectedCity.value)
  }

  // 类型筛选
  if (selectedType.value !== 'all') {
    result = result.filter(a => a.type === selectedType.value)
  }

  // 价格筛选
  if (selectedPrice.value !== 'all') {
    result = result.filter(a => {
      if (selectedPrice.value === 'free') return a.price === 0
      if (selectedPrice.value === 'low') return a.price > 0 && a.price < 50
      if (selectedPrice.value === 'mid') return a.price >= 50 && a.price <= 150
      if (selectedPrice.value === 'high') return a.price > 150
      return true
    })
  }

  // 排序
  if (selectedSort.value === 'price-asc') {
    result = [...result].sort((a, b) => a.price - b.price)
  } else if (selectedSort.value === 'price-desc') {
    result = [...result].sort((a, b) => b.price - a.price)
  } else if (selectedSort.value === 'rating') {
    result = [...result].sort((a, b) => b.rating - a.rating)
  } else if (selectedSort.value === 'hot') {
    result = [...result].sort((a, b) => (b.hot ? 1 : 0) - (a.hot ? 1 : 0))
  }

  return result
})

// 重置筛选
const resetFilters = () => {
  selectedCity.value = 'all'
  selectedType.value = 'all'
  selectedPrice.value = 'all'
  selectedSort.value = 'hot'
}

// 搜索景点
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  // TODO: 调用搜索接口
  // searchAttractions(searchKeyword.value, {
  //   city: selectedCity.value,
  //   type: selectedType.value,
  //   price: selectedPrice.value,
  //   sort: selectedSort.value
  // })
  ElMessage.success(`搜索: ${searchKeyword.value}`)
}

// 跳转到详情页
const goToDetail = (id) => {
  router.push(`/attractions/${id}`)
}

// 预订门票
const handleBook = (attraction) => {
  router.push({
    path: `/attractions/${attraction.id}`,
    query: { action: 'book' }
  })
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    // TODO: 实际项目中调用 API
    // const [citiesRes, typesRes, attractionsRes] = await Promise.all([
    //   getCities(),
    //   getTypes(),
    //   getAttractionsList({
    //     city: selectedCity.value,
    //     type: selectedType.value,
    //     price: selectedPrice.value,
    //     sort: selectedSort.value
    //   })
    // ])
    // cities.value = citiesRes.data
    // types.value = typesRes.data
    // attractions.value = attractionsRes.data

    // 模拟加载延迟
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 监听筛选条件变化
const handleFilterChange = () => {
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="less">
.attractions-page {
  min-height: 100vh;
  background: #f8f9fa;
}

// 快速搜索
.quick-search {
  display: flex;
  gap: 16px;
  max-width: 700px;
  width: 100%;
  margin-top: 32px;
  height: 40px;

  .search-input {
    flex: 1;

    :deep(.el-input__wrapper) {
      border-radius: 50px;
      padding: 8px 24px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
  }

  .search-btn {
    padding: 0 40px;
    border-radius: 50px;
    background: #fff;
    color: #ff6b6b;
    border: none;
    font-weight: 600;

    &:hover {
      background: rgba(255, 255, 255, 0.9);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
  }
}

// 筛选区域
.filter-section {
  background: #fff;
  padding: 32px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.filter-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filter-group {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  min-width: 100px;
  padding-top: 8px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.filter-option {
  padding: 8px 20px;
  background: #f5f7fa;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;

  &:hover {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    transform: translateY(-2px);
  }

  &.active {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    font-weight: 600;
  }

  .option-icon {
    font-size: 16px;
  }
}

// 景点列表
.attractions-section {
  padding: 40px 0 80px;
}

.section-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.attraction-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);

    .card-image img {
      transform: scale(1.1);
    }
  }

  .card-image {
    height: 220px;
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .card-badges {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .badge {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      backdrop-filter: blur(10px);

      &.hot {
        background: rgba(255, 107, 107, 0.9);
        color: #fff;
      }

      &.discount {
        background: rgba(255, 193, 7, 0.9);
        color: #fff;
      }
    }
  }

  .card-content {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    flex: 1;
  }

  .card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ffa500;
    font-size: 14px;
    font-weight: 600;

    .star {
      font-size: 16px;
    }
  }

  .card-location {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #999;
    font-size: 13px;
    margin-bottom: 12px;
  }

  .card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 12px 0;
  }

  .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tag {
    padding: 4px 12px;
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    border-radius: 12px;
    font-size: 12px;
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .price-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .price-label {
    font-size: 12px;
    color: #999;
  }

  .price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
  }

  .current-price {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
  }

  .book-btn {
    padding: 10px 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    border: none;
    font-weight: 600;
  }
}

// 响应式
@media (max-width: 1200px) {
  .attractions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .quick-search {
    flex-direction: column;

    .search-btn {
      width: 100%;
    }
  }

  .filter-group {
    flex-direction: column;
    gap: 12px;
  }

  .filter-label {
    min-width: auto;
    padding-top: 0;
  }

  .attractions-grid {
    grid-template-columns: 1fr;
  }
}
</style>
